<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区</title>
</head>
<body>
<style>
body{
    background: #e6e3e3;
}
.xian1{
position: absolute;
left: 13%;
top: 66px;
width: 4px;
height: 33px;
background: #302D2D;
border-radius: 3px;
}
.text1{
position: absolute;
left: 14%;
top: 4%;
width: 222px;
height: 30px;
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #383730;
}
#tupian0{
    width: 100%;
    height: 55%;
    object-fit: cover;
}

#tupian1{
position: absolute;
left:13% ;
top: 116px;
width: 73%;
height: 50%;
}

.xia{
    width: 73%;
    height: 270px;
    position: absolute;
    left: 13%;
    top: 492px;
    background: #FFFFFF;
}

#jing{
    width: 205px;
    height: 64px;
    position: absolute;
    left: 3%;
    top: 10%;
}
#but1{
position: absolute;
left: 25%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/xingwei.png);
background-repeat: no-repeat;
background-position: 30px 15px;
background-size: 35px;
}
.ui_primary{
    position: absolute;
left: 25%;  
top: 40%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
}
.ui_primary img{
position: absolute;
left: 10%;  
top: 20%;
width: 46px;
height: 46px;
}
.ui_primary p{
position: absolute;
left: 30%;  
top: 5%;
}

#but2{
position: absolute;
left: 50%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/fond.png);
background-repeat: no-repeat;
background-position: 30px 15px;
background-size: 35px;
}

#but3{
position: absolute;
left: 75%;  
top: 10%;
width: 246px;
height: 70px;
background: #FFFFFF;
border: 2px solid #FFD200;
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #282828;
background-image: url(./img/index-img/jqxinx.png);
background-repeat: no-repeat;
background-position: 30px 18px;
background-size: 29px;
}
</style>

<div class="shang">
    <div class="xian1"></div>
    <p class="text1">秦始皇陵博物院</p>
    <img src="./img/index-img/3.png" id="tupian0">
    <img src="./img/index-img/2.jpg" id="tupian1">
</img>

<div class="xia">
    <img id="jing" src="./img/logo.png">
    <button id="but1">人流监控</button>
    <button id="but2">游客喜好</button>
    <button id="but3">景区信息</button>
    <label class="ui_primary" for="xFile"><img src="./img/index-img/wenj.png"><p>批量录入游客</p></label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>
</div>
<script>
let but1=document.querySelector('#but1')
let but2=document.querySelector('#but2')
let but3=document.querySelector('#but3')
but1.addEventListener('click',function(){
    window.location.href="ykxw.html"
})
but2.addEventListener('click',function(){
    window.location.href="ykxh.html"
})
but3.addEventListener('click',function(){
    window.location.href="jinquxx.html"
})
</script>
</body>
</html>